site_8g/src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

"use client";
import { getWheelApi } from "@/api/cashWheel";
import { ServiceTypes } from "@/api/customservice";
import { userInfoApi } from "@/api/login";
import { lredPacketApi, redPacketApi } from "@/api/promo";
import { getGiveInfoApi } from "@/api/slots";
import UserRecharge, { ModalRefProps, Timeout } from "@/components/ModalPopup/RechargeModal";
import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
import SignInModal, { SignInModalProps } from "@/components/ModalPopup/SignInModal";
import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
import WheelModal, { WheelModalProps } from "@/components/ModalPopup/WheelModal";
import { useEventPoint } from "@/hooks/useEventPoint";
import { Link } from "@/i18n/routing";
import { useModalShow } from "@/stores/modalShow";
import { useFirstPayStore } from "@/stores/useFirstPayStore";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { useSignStore } from "@/stores/useSignStore";
import useWheelStore from "@/stores/useWheelStore";
import { getToken } from "@/utils/Cookies";
import { useRequest } from "ahooks";
import { Badge } from "antd-mobile";
import dayjs from "dayjs";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { FC, useEffect, useMemo, useRef, useState } from "react";

interface Props {
    services: ServiceTypes[];
}

interface SlotSectionProps {
    onDestory?: () => void;
}
/**
 * 免费送活动
 */
const SlotSection: FC<SlotSectionProps> = ({ onDestory }) => {
    const slotsRef = useRef<SlotModalRefProps | null>(null);
    const getSlots = async () => {
        const token = getToken();
        if (token) {
            const result = await getGiveInfoApi();
            return result.data;
        } else {
            destory();
            return Promise.resolve({});
        }
    };

    const { data: slots, run: slotRun } = useRequest<any, any>(getSlots, {
        pollingInterval: 2000,
        pollingErrorRetryCount: 1,
        pollingWhenHidden: false,
    });
    const slotHandler = () => {
        slotsRef.current?.onOpen(slots);
    };
    const destory = () => {
        if (onDestory && typeof onDestory === "function") onDestory();
    };

    return (
        <>
            {slots?.id ? (
                <img
                    src={"/slots/slots-icon.gif"}
                    className={"mb-[0.2778rem] w-[100%]"}
                    onClick={slotHandler}
                />
            ) : null}

            {/*随机送*/}
            <SlotsModal ref={slotsRef} onAfterHandler={slotRun} onClose={destory} />
        </>
    );
};

/**
 * 轮盘
 */
const WheelSection = () => {
    const pathname = usePathname();
    const wheelModalRef = useRef<WheelModalProps | null>(null);
    const [data, setData] = useState<any>([]);
    const { modalShow, closeModalShow } = useModalShow((state: any) => ({
        modalShow: state.modalShow,
        closeModalShow: state.closeModalShow,
    }));
    const keyName = useMemo(() => {
        return "WheelSection";
    }, []);
    const { wheelStatus, wheelCurrent, setWheel } = useWheelStore((state) => ({
        wheelStatus: state.status,
        wheelCurrent: state.currentWheel,
        setWheel: state.setWheel,
    }));

    useEffect(() => {
        setWheel().then((data) => {
            if (data && useWheelStore.getState().status === 1) {
                setData(data);
            }
        });
    }, []);

    useEffect(() => {
        if (!data) return;
        if (modalShow === keyName) {
            wheelModalRef.current?.onOpen(data);
        }
    }, [modalShow, data, keyName, pathname]);

    const destoryComponent = () => {
        if (modalShow === keyName) {
            closeModalShow(keyName);
        }
    };

    return (
        <>
            {wheelStatus === 2 ? (
                <Link
                    href={"/cashWheel"}
                    className={
                        "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
                        " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
                    }
                >
                    <Image src={"/wheels/wheel-icon.gif"} alt={"wheel"} width={100} height={100} />
                </Link>
            ) : null}

            {/*  轮盘弹窗 */}
            <WheelModal ref={wheelModalRef} onDestory={destoryComponent} />
        </>
    );
};
/**
 * 首充
 */
const PaySection = () => {
    const token = getToken();

    const { firstPay, getPayData } = useFirstPayStore((state) => {
        return {
            firstPay: state.first_pay,
            getPayData: state.getPayData,
        };
    });

    const userRechargeRef = useRef<ModalRefProps>(null);
    // 首充活动
    // const getPayInfo = async (): Promise<PayDataType> => {
    //     if (token) {
    //         const result = await getPaysApi();
    //         return result.data;
    //     } else {
    //         return Promise.resolve({
    //             first_pay: [],
    //             pay: [],
    //         });
    //     }
    // };
    // const getPayInfo = async (): Promise<PayDataType> => {};

    const { data, run: payRun } = useRequest(getPayData, {
        pollingErrorRetryCount: 1,
        pollingWhenHidden: false,
    });
    return (
        <>
            {firstPay.map((item, index) => {
                return (
                    <div
                        key={index}
                        className={`mb-[0.2778rem] flex cursor-pointer flex-col items-center`}
                    >
                        <img
                            className={"w-[0.54rem]"}
                            src="/hby/recharge.png"
                            onClick={() => {
                                userRechargeRef.current?.onOpen &&
                                    userRechargeRef.current?.onOpen(firstPay, index);
                            }}
                        />
                        {item.count_down > 0 ? (
                            <Timeout
                                className={
                                    "relative before:left-0 before:top-0 before:content-['']" +
                                    " -m-[0.0417rem] before:h-[100%] before:blur-[0.0486rem]" +
                                    " before:absolute before:-z-10 before:w-[100%] before:bg-[#ed9d00]" +
                                    " text-[0.08rem]" +
                                    " z-1 text-[#fff]"
                                }
                                endTime={item.count_down}
                                onEndHandler={payRun}
                            />
                        ) : null}
                    </div>
                );
            })}

            {/*首充弹窗*/}
            <UserRecharge ref={userRechargeRef} />
        </>
    );
};

/**
 * 红包雨
 */
const RedPacketSection = () => {
    const token = getToken();
    const redPacketModalRef = useRef<RedPacketModalProps>(null);
    const getRedPacketInfo = async () => {
        try {
            let redPacketInfo: any;
            let actList: any = [];
            if (token) {
                redPacketInfo = await lredPacketApi();
                actList = redPacketInfo.data?.red_packets || [];
            } else {
                redPacketInfo = await redPacketApi();
                actList = redPacketInfo.data || [];
            }

            // 已经开始
            return actList.filter((aItem: any) => {
                return aItem.is_start;
            });
        } catch (error) {}
    };
    // 红包雨轮询
    const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
        pollingInterval: 5000,
        pollingErrorRetryCount: 1,
        pollingWhenHidden: false,
    });
    return (
        <>
            {packets?.map((item, index) => {
                const icons = JSON.parse(item.icon);
                const icon = icons[icons.length - 1];
                return (
                    <div key={index} className={`mb-[0.2778rem] cursor-pointer`}>
                        <img
                            className={"w-[0.54rem] object-fill"}
                            src={icon}
                            onClick={() => {
                                redPacketModalRef.current?.onOpen(packets, index);
                            }}
                        />
                    </div>
                );
            })}

            {/*红包雨弹窗*/}
            <RedPacketModal ref={redPacketModalRef} onAfterHandler={run} />
        </>
    );
};

const MessageSection = () => {
    const { unread, userUnred } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
        userUnred: state.userUnred,
    }));
    return (
        <>
            {unread || userUnred ? (
                <Link
                    href={"/notification"}
                    className={
                        "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
                        " justify-center rounded-[50%] bg-gradient-to-t from-[#ffa111]" +
                        " to-[#ffcf35]"
                    }
                >
                    <Badge content={userUnred + unread} style={{ "--top": "12px" }}>
                        <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
                    </Badge>
                </Link>
            ) : null}
        </>
    );
};
/**
 * 客服
 */
const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
    const { services } = props;
    const defaultService = services?.filter((item) => item.is_suspend === 1);
    return (
        <>
            {defaultService?.map((item, index) => (
                <Link
                    key={index}
                    href={item.url}
                    className={
                        "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
                        " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
                    }
                    target={"_blank"}
                >
                    <img
                        className={"h-[0.3889rem] w-[0.3889rem] object-contain"}
                        src={item.icon_url}
                        alt={""}
                    ></img>
                </Link>
            ))}
        </>
    );
};

const getMaxSignId = (obj: any) => {
    if (!obj) return null;
    const signArr: number[] = [];
    Object.keys(obj).map((key) => {
        if (obj[key] === 9) {
            signArr.push(Number(key));
        }
    });
    return signArr.length > 0 ? Math.max(...signArr) : null;
};

/**
 * 签到活动
 */
const SignInSection: FC = () => {
    const { modalShow, closeModalShow } = useModalShow((state: any) => ({
        modalShow: state.modalShow,
        closeModalShow: state.closeModalShow,
    }));
    const SignInRef = useRef<SignInModalProps>(null);
    const [activityId, setActivityId] = useState<number | null>(null);
    const keyName = "SignInSection";
    const { getSignData, signData } = useSignStore((state) => {
        return {
            getSignData: state.getSignData,
            signData: state.signData,
        };
    });
    const getUserInfo = async () => {
        const res: any = await userInfoApi();
        if (res.code === 200 && res.data?.activity) {
            const activity_id = getMaxSignId(res.data?.activity);
            if (activity_id) {
                setActivityId(activity_id);
                await getSignData({ activity_id: activity_id });
            }
        }
    };
    const checkIsShowed = () => {
        const showTime = localStorage.getItem("sign");
        if (showTime) {
            const nextDay = dayjs(Number(showTime)).add(1, "day").format("YYYY-MM-DD");
            if (dayjs(nextDay).isAfter(dayjs())) {
                return true;
            }
        }
        return false;
    };
    useEffect(() => {
        // if (checkIsShowed()) return;
        if (getToken()) getUserInfo();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const destoryComponent = () => {
        closeModalShow(keyName);
    };
    useEffect(() => {
        console.log(modalShow, modalShow === keyName, getToken());
        if (modalShow === keyName && getToken()) {
            if (checkIsShowed()) {
                destoryComponent();
            } else {
                localStorage.setItem("sign", `${Date.now()}`);
                signInHandle();
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [modalShow, keyName]);

    const signInHandle = () => {
        SignInRef.current?.onOpen();
    };

    if (!activityId) {
        return null;
    }
    return (
        <>
            {/* <div
                className={
                    "mt-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center justify-center" +
                    " rounded-[50%]" +
                    " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
                }
                onClick={signInHandle}
            >
                Sign
            </div> */}
            <SignInModal ref={SignInRef} onDestory={destoryComponent}></SignInModal>
        </>
    );
};

const ServiceWidget: FC<Props> = (props) => {
    const { services } = props;
    const [type, setType] = useState<number>(0);

    const { eventView } = useEventPoint();
    const newServices = services?.filter((item) => item.status === 1) || [];

    const getWheel = () => {
        if (!getToken()) return Promise.resolve(undefined);
        return getWheelApi().then((res) => {
            return res.data;
        });
    };

    useEffect(() => {
        // 数据存储，侧边栏使用
        // setSocials(socials);
        // pixel 埋点
        // eventView();
    }, []);

    const t = useTranslations("HomePage");

    // const servicesMap = new Map<number, any>([
    //     [
    //         0,
    //         {
    //             components: <SlotSection />,
    //         },
    //     ],
    //     [
    //         1,
    //         {
    //             components: <WheelSection />,
    //         },
    //     ],
    //     [
    //         2,
    //         {
    //             components: <PaySection />,
    //         },
    //     ],
    //     [
    //         3,
    //         {
    //             components: <RedPacketSection />,
    //         },
    //     ],
    //     [
    //         4,
    //         {
    //             components: <MessageSection />,
    //         },
    //     ],
    //     [
    //         5,
    //         {
    //             components: <CustomerSection services={services} />,
    //         },
    //     ],
    //     [
    //         6,
    //         {
    //             components: <SignInSection />,
    //         },
    //     ],
    // ]);

    // const curComponents = useMemo(() => {
    //     return servicesMap.get(type)?.components;
    //     // eslint-disable-next-line react-hooks/exhaustive-deps
    // }, [type, services, servicesMap]);

    // const modalDestory = () => {
    //     setType(type + 1);
    // };

    // console.log("type:", type);

    return (
        <>
            <div
                className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
            >
                {/* {React.cloneElement(curComponents, { onDestory: modalDestory })} */}
                <SlotSection />
                {/*轮盘  */}
                <WheelSection />
                {/*首充*/}
                <PaySection />
                {/* 红包雨icon */}
                <RedPacketSection />
                {/*未读消息*/}
                <MessageSection />
                {/*客服*/}
                <CustomerSection services={services} />
                {/* 签到 */}
                <SignInSection />
            </div>

            <div
                className={`grid`}
                style={{
                    gridTemplateColumns: ` repeat(${newServices && newServices.length >= 5 ? 5 : (newServices?.length ?? 1)},1fr)`,
                }}
            >
                {newServices.map((service, index) => {
                    return (
                        <Link
                            key={index}
                            href={service.url}
                            target={"_blank"}
                            className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded"
                        >
                            <img
                                className={"h-[0.3889rem] w-[0.3889rem]"}
                                src={service.icon_url}
                            ></img>
                        </Link>
                    );
                })}
            </div>

            <div className={"text-[#ced1ff]"}>{t("Service")}</div>

            {/*share*/}
            <div className={"my-[0.2rem] text-[0.12rem] text-[#ced1ff]"}>{t("Share")}</div>

            <Image
                src={"/logo2.png"}
                alt={"BCWIN777"}
                width={120}
                height={180}
                className={"mb-[0.2rem]"}
            />
        </>
    );
};

export default ServiceWidget;